<html>

<head>
  <title>Network GWT documentation</title>
  <link rel='stylesheet' href='default.css' type='text/css'>

  <link href="prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="prettify/prettify.js"></script>
</head>

<body onload="prettyPrint();">

  <h1>Network GWT documentation</h1>

  <p>
  There is a GWT wrapper available to use the Network inside Google Web
  Toolkit (GWT).
  This documentation assumes you have Eclipse installed, and have GWT 
  installed in Eclipse.
  </p>

  <h2>Short guide</h2>
  <p>
  To use the GWT version of the Network, create a GWT project. Put a copy of the 
  modules <b><a href="http://almende.github.com/chap-links-library/downloads.html">gwt-links-network.jar</a></b> and
  <b><a href="http://code.google.com/p/gwt-google-apis/downloads/" target="_blank">gwt-visualization.jar</a></b>
  in a subfolder of your project (for example lib), 
  and add both jar-modules to your project via "Build path", "Configure Build Path...", "Add JARs...". 
  Then, add the following lines to the module file YourProject.gwt.xml:
  </p>
  <pre class="prettyprint lang-html">&lt;!-- Other module inherits                                      --&gt;
&lt;inherits name='com.google.gwt.visualization.Visualization'/&gt; 
&lt;inherits name='com.chap.links.Network'/&gt;
</pre>
  <p>
  Thats all, now you can use the Network visualization.
  </p>
  
  <p>
  Open the main HTML file of your project, located in the directory war 
  (typically war/YourProject.html). In there, create a DIV the id "mynetwork".
  </p>
  <pre class="prettyprint lang-html">
&lt;html&gt;
  &lt;head&gt;
    ...
  &lt;/head&gt;
  &lt;body&gt;
    ...
      &lt;div id="mynetwork"&gt;&lt;/div&gt;
    ...
  &lt;/body&gt;
&lt;/html&gt;	</pre>
  
  <p>
    Open the entry point java file of your project (typically YourProject.java),
    and add code to create a datatable with nodes, create a datatable with links,
    specify some options, and create a Network widget.  
  </p>
  
  <pre class="prettyprint lang-java">
package com.yourproject.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.visualization.client.DataTable;
import com.google.gwt.visualization.client.VisualizationUtils;
import com.chap.links.client.Network;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class YourProject implements EntryPoint {
    Network network = null;
    
    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {
        // Create a callback to be called when the visualization API
        // has been loaded.
        Runnable onLoadCallback = new Runnable() {
          public void run() {

            // Create nodes table with some data
            DataTable nodes = DataTable.create();
            nodes.addColumn(DataTable.ColumnType.NUMBER, "id");
            nodes.addColumn(DataTable.ColumnType.STRING, "text");
            nodes.addRow(); 
            int i = 0;
            nodes.setValue(i, 0, 1);
            nodes.setValue(i, 1, "Node 1");
            nodes.addRow(); 
            i++;
            nodes.setValue(i, 0, 2);
            nodes.setValue(i, 1, "Node 2");
            nodes.addRow(); 
            i++;
            nodes.setValue(i, 0, 3);
            nodes.setValue(i, 1, "Node 3");

            // Create links table with some data
            DataTable links = DataTable.create();
            links.addColumn(DataTable.ColumnType.NUMBER, "from");
            links.addColumn(DataTable.ColumnType.NUMBER, "to");
            links.addRow(); 
            i = 0;
            links.setValue(i, 0, 1);
            links.setValue(i, 1, 2);
            links.addRow(); 
            i++;
            links.setValue(i, 0, 1);
            links.setValue(i, 1, 3);
            links.addRow(); 
            i++;
            links.setValue(i, 0, 2);
            links.setValue(i, 1, 3);

            // Create options
            Network.Options options = Network.Options.create();
            options.setWidth("300px");
            options.setHeight("300px");
            
            // create the visualization, with data and options
            network = new Network(nodes, links, options);
            
            RootPanel.get("mynetwork").add(network);
          }
        };
        
        // Load the visualization api, passing the onLoadCallback to be called
        // when loading is done.
        VisualizationUtils.loadVisualizationApi(onLoadCallback);  
    }
}</pre>
  
  <h2>Documentation</h2>
  <p>
  At the moment there is no documentation available for the GWT version of the 
  Network.
  Please use the javascript documentation, which describes the
  available methods, data format, options, events, and styles.
  </p>
  <p>
  <a href="http://links.sf.net/network/js/doc">Javascript documentation</a>
  </p>
  
  <h2>Reference sites</h2>
  
  <p><a href="http://code.google.com/p/gwt-google-apis/wiki/VisualizationGettingStarted" target="_blank">http://code.google.com/p/gwt-google-apis/wiki/VisualizationGettingStarted</a></p>
  
  <div style="height:50px;"></div>
</body>
</html>
